<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="interval">
  <link rel="stylesheet" href="./assets/common.css">
  <title>Bar Dodge No Margin</title>
</head>

<body>
  <div id="canvas"></div>
  <script src="./assets/jquery-3.2.1.min.js"></script>
  <script src="./assets/data-set.min.js"></script>
  <script src="../build/g2.js"></script>
  <script>
    // 更改柱状图所占的空间
    // G2.Global.widthRatio.column = 3 / 4;
    const data = [
      { 月均降雨量: 49.9, 月份: 'Jan.', name: 'Tokyo' },
      { 月均降雨量: 71.5, 月份: 'Feb.', name: 'Tokyo' },
      { 月均降雨量: 106.4, 月份: 'Mar.', name: 'Tokyo' },
      { 月均降雨量: 129.2, 月份: 'Apr.', name: 'Tokyo' },
      { 月均降雨量: 144, 月份: 'May', name: 'Tokyo' },
      { 月均降雨量: 176, 月份: 'Jun.', name: 'Tokyo' },
      { 月均降雨量: 135.6, 月份: 'Jul.', name: 'Tokyo' },
      { 月均降雨量: 148.5, 月份: 'Aug.', name: 'Tokyo' },
      { 月均降雨量: 216.4, 月份: 'Sep.', name: 'Tokyo' },
      { 月均降雨量: 194.1, 月份: 'Oct.', name: 'Tokyo' },
      { 月均降雨量: 95.6, 月份: 'Nov.', name: 'Tokyo' },
      { 月均降雨量: 54.4, 月份: 'Dec.', name: 'Tokyo' },
      { 月均降雨量: 83.6, 月份: 'Jan.', name: 'New York' },
      { 月均降雨量: 78.8, 月份: 'Feb.', name: 'New York' },
      { 月均降雨量: 98.5, 月份: 'Mar.', name: 'New York' },
      { 月均降雨量: 93.4, 月份: 'Apr.', name: 'New York' },
      { 月均降雨量: 106, 月份: 'May', name: 'New York' },
      { 月均降雨量: 84.5, 月份: 'Jun.', name: 'New York' },
      { 月均降雨量: 105, 月份: 'Jul.', name: 'New York' },
      { 月均降雨量: 104.3, 月份: 'Aug.', name: 'New York' },
      { 月均降雨量: 91.2, 月份: 'Sep.', name: 'New York' },
      { 月均降雨量: 83.5, 月份: 'Oct.', name: 'New York' },
      { 月均降雨量: 106.6, 月份: 'Nov.', name: 'New York' },
      { 月均降雨量: 92.3, 月份: 'Dec.', name: 'New York' },
      { 月均降雨量: 48.9, 月份: 'Jan.', name: 'London' },
      { 月均降雨量: 38.8, 月份: 'Feb.', name: 'London' },
      { 月均降雨量: 39.3, 月份: 'Mar.', name: 'London' },
      { 月均降雨量: 41.4, 月份: 'Apr.', name: 'London' },
      { 月均降雨量: 47, 月份: 'May', name: 'London' },
      { 月均降雨量: 48.3, 月份: 'Jun.', name: 'London' },
      { 月均降雨量: 59, 月份: 'Jul.', name: 'London' },
      { 月均降雨量: 59.6, 月份: 'Aug.', name: 'London' },
      { 月均降雨量: 52.4, 月份: 'Sep.', name: 'London' },
      { 月均降雨量: 65.2, 月份: 'Oct.', name: 'London' },
      { 月均降雨量: 59.3, 月份: 'Nov.', name: 'London' },
      { 月均降雨量: 51.2, 月份: 'Dec.', name: 'London' },
      { 月均降雨量: 42.4, 月份: 'Jan.', name: 'Berlin' },
      { 月均降雨量: 33.2, 月份: 'Feb.', name: 'Berlin' },
      { 月均降雨量: 34.5, 月份: 'Mar.', name: 'Berlin' },
      { 月均降雨量: 39.7, 月份: 'Apr.', name: 'Berlin' },
      { 月均降雨量: 52.6, 月份: 'May', name: 'Berlin' },
      { 月均降雨量: 75.5, 月份: 'Jun.', name: 'Berlin' },
      { 月均降雨量: 57.4, 月份: 'Jul.', name: 'Berlin' },
      { 月均降雨量: 60.4, 月份: 'Aug.', name: 'Berlin' },
      { 月均降雨量: 47.6, 月份: 'Sep.', name: 'Berlin' },
      { 月均降雨量: 39.1, 月份: 'Oct.', name: 'Berlin' },
      { 月均降雨量: 46.8, 月份: 'Nov.', name: 'Berlin' },
      { 月均降雨量: 51.1, 月份: 'Dec.', name: 'Berlin' }
    ];
    const chart = new G2.Chart({
      container: 'canvas',
      forceFit: true,
      height: window.innerHeight
    });
    chart.source(data, {
      月均降雨量: {
        alias: '月均降雨量（ml）'
      }
    });
    chart.legend({
      onHover(ev) {
        const shapes = ev.shapes;
        const geom = ev.geom;
        geom.highlightShapes(shapes);
      }
    });
    // chart.axis('月均降雨量', {
    //   title: {
    //     position: 'middle',
    //     autoRotate: false,
    //     textStyle: {
    //       textAlign: 'start',
    //       fill: '#000'
    //     },
    //     // offset: -10
    //   }
    // });
    chart.coord().transpose().scale(1, -1);
    chart.scale('name', { alias: '城市' });
    chart.interval()
      .position('月份*月均降雨量')
      .adjust([{
        type: 'dodge',
        marginRatio: 0
      }])
      .color('name', [ '#FF6A84', '#30A4EB', '#45BFC0', '#FFCC55' ]);

    chart.render();
  </script>
</body>

</html>
